<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="author" content="xiaojiangK" />
		<meta name="email" content="740092856@qq.com" />
		<meta name="gitee" content="https://gitee.com/xiaojiangk/" />
		<meta name="viewport" content="width=1200, initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="images/css/admin.min.css" />
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<title>admin-topmenu</title>
	</head>
	<body>
		<div class="demo-main other-page">
			<div class="admim-title">
				<h2>Topmenu 顶部菜单</h2>
			</div>
			<div class="item">
				<div class="title">
					<h3>基础用法</h3>
				</div>
				<div class="content">
					<!-- qx-top start -->
					<div class="qx-top">
						<div class="logo">
							<a href="#">商户管理平台</a>
						</div>
						<div class="left_open">
							<a><i title="展开左侧栏" class="iconfont icon-menu"></i></a>
						</div>
						<div class="menu">
							<ul>
								<li class="active">
									<a href="#">
										<i class="iconfont icon-payconfig"></i>
										<span>支付</span>
									</a>
								</li>
								<li>
									<a href="#">
										<i class="iconfont icon-cooperate"></i>
										<span>SCRM</span>
									</a>
								</li>
								<li>
									<a href="#">
										<i class="iconfont icon-shangji"></i>
										<span>预授权</span>
									</a>
								</li>
							</ul>
						</div>
						<ul class="right">
							<li class="nav-item">
								<a href="#">消息</a>
							</li>
							<li class="nav-item toggle">
								<a href="javascript:;">
									7号仓库
									<span class="iconfont icon-icondown"></span>
									<i class="nav-bg"></i>
								</a>
								<dl class="nav-child">
									<dd><a href="#">修改密码</a></dd>
									<dd><a href="#">退出</a></dd>
								</dl>
							</li>
						</ul>
					</div>
					<!-- qx-top end -->
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>菜单显示文字</h3>
				</div>
				<div class="content">
					<div class="qx-top">
						<div class="logo">
							<a href="#">商户管理平台</a>
						</div>
						<div class="left_open">
							<a><i title="展开左侧栏" class="iconfont icon-menu"></i></a>
						</div>
						<div class="menu text">
							<ul>
								<li class="active"><a href="#">支付</a></li>
								<li><a href="#">SCRM</a></li>
								<li><a href="#">预授权</a></li>
							</ul>
						</div>
						<ul class="right">
							<li class="nav-item">
								<a href="#">消息</a>
							</li>
							<li class="nav-item toggle">
								<a href="javascript:;">
									7号仓库
									<span class="iconfont icon-icondown"></span>
									<i class="nav-bg"></i>
								</a>
								<dl class="nav-child">
									<dd><a href="#">修改密码</a></dd>
									<dd><a href="#">退出</a></dd>
								</dl>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<script src="images/js/jquery.min.js"></script>
		<script src="images/js/admin.min.js"></script>
		<script>
			// 监听右侧非下拉菜单事件
			$('.qx-top .nav-item:not(".toggle")').on('click', function () {
				console.log('this is nav-item')
			})

			// 监听右侧下拉菜单事件
			$('.qx-top .nav-child dd').each(function (index) {
				$(this).on('click', function () {
					if (index == 0) {
						// 修改密码
						$(this).layer({
							area: [50, 50],
							content: './icon.html', // 修改密码路径
							close: function () {
								console.log('this is close')
							}
						})
					} else if (index == 1) {
						// 退出
						$(this).messageBox({
							type: 'warning',
							message: '退出成功',
							confirm: function () {
								// 清楚Tabs缓存
								$(this).clearStorage({
									key: 'tagList'
								})
								console.log('confirm')
							}
						})
					}
				})
			})
		</script>
	</body>
</html>
